CSS elemek részletes bemutatása

A CSS (Cascading Style Sheets) a weboldalak megjelenéséért felelős. Ezen az oldalon részletesen bemutatjuk a legfontosabb tulajdonságokat, szelektorokat, box modelt, layout lehetőségeket, tipográfiát, színeket, háttereket, animációkat, átmeneteket, és speciális szabályokat, hogy kezdőként és haladóként is átlásd a stílusok működését.

1. Szelektorok

Elem szelektor: minden adott HTML elemet kiválaszt. Példa: p { color: red; } – minden p elem piros lesz
Osztály szelektor: bármely elemhez, ami adott osztályt tartalmaz: .fooldal { text-align: center; } – az osztályhoz tartozó elemek középre lesznek igazítva
ID szelektor: az egyedi azonosítóval rendelkező elem: #header { background: blue; } – csak a #header elemre vonatkozik
Örökölt szelektor: pl. div p { color: green; } – minden p, ami div-en belül van, zöld lesz
Attribútum szelektor: pl. a[href^="https"] { color: green; } – a href “https”-sel kezdődő linkek zöldek lesznek

2. Színek és háttér

color: szöveg színe
background-color: háttérszín beállítása
background-image: háttérkép beállítása
background-repeat: ismétlés beállítása (no-repeat, repeat-x, repeat-y)
background-size: a háttérkép mérete (cover – kitölti az elemet, contain – arányosan illeszkedik, px, %)
background-position: a háttérkép pozíciója (center, top, left, right)
linear-gradient / radial-gradient: színátmenetek készítése (lineáris vagy radiális)

3. Betűk és szöveg

font-family: betűtípus megadása
font-size: betűméret beállítása (px, em, rem, %)
font-weight: betűvastagság (normal, bold, 100-900)
font-style: betű stílusa (normal, italic, oblique)
text-align: szöveg igazítása (left, right, center, justify)
line-height: sorok közötti távolság
text-decoration: szöveg aláhúzás, áthúzás, nincs, felülhúzás
text-transform: szöveg átalakítása (uppercase – nagybetű, lowercase – kisbetű, capitalize – minden szó első betűje nagy)
letter-spacing: betűköz
word-spacing: szóköz a szavak között

4. Box model

width / height: elem szélessége és magassága
padding: belső margó a tartalom és a keret között
border: keret stílusa, színe, vastagsága
margin: külső margó, távolság más elemtől
box-sizing: content-box / border-box – hogyan számítjuk a szélességet és magasságot (padding és border beszámít-e)

5. Pozicionálás

position: elem pozíciója (static, relative, absolute, fixed, sticky)
top / right / bottom / left: pozíció megadása a position alapján
z-index: réteg sorrend meghatározása
overflow: hogyan kezeljük a túlcsorduló tartalmat (visible, hidden, scroll, auto)

6. Layout technikák

display: elem megjelenítése (block, inline, inline-block, flex, grid, none)
Flexbox: rugalmas elrendezés: display: flex; justify-content – vízszintes igazítás; align-items – függőleges igazítás; flex-wrap – tördelés
Grid: rács alapú elrendezés: display: grid; grid-template-columns / rows – oszlopok és sorok; gap – térköz

7. Átmenetek és animációk

transition: sima átmenet tulajdonságok között, pl. hover esetén
@keyframes: animáció lépéseinek definiálása
animation: animáció neve, időtartam, ismétlés, irány, késleltetés

8. Láthatóság és átlátszóság

opacity: elem átlátszósága 0-1 között
visibility: láthatóság: visible / hidden
clip-path: elem vágása különböző formákra

9. Speciális tulajdonságok

cursor: kurzor stílusa: pointer, default, move, text stb.
box-shadow: árnyék hozzáadása a dobozhoz
text-shadow: árnyék a szöveghez
transition-timing-function: animáció sebesség görbéje: ease, linear, ease-in, ease-out

10. Példa egyszerű CSS-re

p {
    color: white; /* szöveg színe fehér */
    background-color: #1595c0; /* háttérszín */
    padding: 10px; /* belső margó */
    border-radius: 5px; /* lekerekített sarkok */
    text-align: center; /* középre igazítás */
    font-family: Arial, sans-serif; /* betűtípus */
    font-size: 16px; /* betűméret */
}
a:hover {
    color: #ffd700; /* hover szín */
    background-color: rgba(0,0,0,0.3); /* hover háttér átlátszó fekete */
}

Ez a példa egy bekezdést formáz, link hover effektussal és háttérszínnel.

Weboldal programozás